<template>
  <div class="contacts-home">
    <div class="list" v-for="(item, index) in userData" :key="index">
      <div class="header">{{ item.index }}</div>
      <div
        class="chat-list"
        v-for="(user, userIndex) in item.users"
        :key="userIndex"
      >
        <div class="photo">
          <img src="../../../assets/list/name.jpg" />
        </div>
        <div class="content">
          <div>
            <span class="content_nickname">{{ user.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, reactive } from "vue";
import { sortFind } from "../../../utils/pinyin";

const props = defineProps({
  list: {
    type: Array,
  },
});
console.log(props.list);
let userData = reactive(props.list);
userData = sortFind(userData);
</script>

<style scoped lang="scss">
.header {
  font-size: $font-size-20;
  background: rgba(215, 212, 212, 0.3) !important;
  padding: 0.04rem 0.1rem;
}
</style>
